---
title: Текст
image: /images/user-guide/notes/notes_header.png
---

<Frame>
  <img src="/images/user-guide/notes/notes_header.png" alt="Header" />
</Frame>

## Ввод текста

Позволяет пользователям вводить и редактировать текст.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { TextInput } from "@/ui/input/components/TextInput";

export const MyComponent = () => {
  const handleChange = (text) => {
    console.log("Input changed:", text);
  };

  const handleKeyDown = (event) => {
    console.log("Key pressed:", event.key);
  };

  return (
    <RecoilRoot>
      <TextInput
        className
        label="Username"
        onChange={handleChange}
        fullWidth={false}
        disableHotkeys={false}
        error="Invalid username"
        onKeyDown={handleKeyDown}
        RightIcon={null}
      />
    </RecoilRoot>
  );
};

```

</Tab>

<Tab title="Props">

| Свойства                | Тип             | Описание                                                                                                                                 |
| ----------------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| className               | строка          | Необязательное имя для дополнительной стилизации                                                                                         |
| метка                   | строка          | Представляет метку для ввода                                                                                                             |
| onChange                | функция         | Функция, вызываемая при изменении значения ввода                                                                                         |
| полнаяШирина            | boolean         | Указывает, должен ли ввод занимать 100% ширины                                                                                           |
| отключитьГорячиеКлавиши | boolean         | Указывает, активированы ли горячие клавиши для ввода                                                                                     |
| ошибка                  | строка          | Представляет сообщение об ошибке, которое будет отображаться. При наличии добавляет значок ошибки с правой стороны ввода |
| приНажатииКлавиши       | функция         | Вызывается, когда клавиша нажата, пока поле ввода сфокусировано. Получает `React.KeyboardEvent` в качестве аргумента     |
| RightIcon               | ИконкаКомпонент | Опциональный компонент иконки, отображаемый с правой стороны ввода                                                                       |

Компонент также принимает другие свойства HTML элемента ввода.

</Tab>

</Tabs>

## Autosize Text Input

Компонент ввода текста, автоматически регулирующий свою высоту в зависимости от содержимого.

<Tabs>

<Tab title="Usage">

```jsx
import { RecoilRoot } from "recoil";
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";

export const MyComponent = () => {
  return (
    <RecoilRoot>
      <AutosizeTextInput
        onValidate={() => console.log("onValidate function fired")}
        minRows={1}
        placeholder="Write a comment"
        onFocus={() => console.log("onFocus function fired")}
        variant="icon"
        buttonTitle
        value="Task: "
      />
    </RecoilRoot>
  );
};
```

</Tab>

<Tab title="Props">

| Свойства        | Тип     | Описание                                                                                           |
| --------------- | ------- | -------------------------------------------------------------------------------------------------- |
| приПроверке     | функция | Функция обратного вызова, которую вы хотите активировать при проверке ввода пользователем          |
| минСтроки       | число   | Минимальное количество строк для текстовой области                                                 |
| placeholder     | строка  | Текст подсказки, который вы хотите отобразить, когда текстовая область пуста                       |
| приФокусе       | функция | Функция обратного вызова, которую вы хотите активировать, когда текстовая область получает фокус   |
| вариант         | строка  | Вариант ввода. Опции включают: `по умолчанию`, `иконка` и `кнопка` |
| заголовокКнопки | строка  | Название для кнопки (актуально только для варианта кнопки)                      |
| значение        | строка  | Начальное значение для текстовой области                                                           |

</Tab>

</Tabs>

## Текстовая Область

Позволяет создавать многострочные вводы текста.

<Tabs>
<Tab title="Usage">

```jsx
import { TextArea } from "@/ui/input/components/TextArea";

export const MyComponent = () => {
  return (
    <TextArea
    disabled={false}
    minRows={4}
    onChange={()=>console.log('On change function fired')}
    placeholder="Enter text here"
    value=""
    />
  );
};
```

</Tab>

<Tab title="Props">

| Свойства    | Тип     | Описание                                                                         |
| ----------- | ------- | -------------------------------------------------------------------------------- |
| отключено   | boolean | Указывает, отключена ли текстовая область                                        |
| минСтроки   | число   | Минимальное количество видимых строк для текстовой области.      |
| onChange    | функция | Функция обратного вызова, вызываемая при изменении содержимого текстовой области |
| placeholder | строка  | Placeholder text displayed when the text area is empty                           |
| значение    | строка  | Текущее значение текстовой области                                               |

</Tab>
</Tabs>
